<template>
   <div class="box">
       <div class="evaluate">
          <div>商品评价</div>
          <div class="all">
              <div @click="pinlunAll" class="all1">全部<span>{{ratingsAll}}</span></div>
              <div @click="pinlunhao" class="all2">推荐<span>{{haopin}}</span></div>
              <div @click="pinluncha" class="all3">吐槽<span>{{chapin}}</span></div>
          </div>
      </div>
      <div class="onlyshow">
          只看有内容的评价
      </div>
       <div class="tease">
           <div class="teaseStart">
              <div v-for="(item) in ratings" :key="item" class="top">
                 <div class="topbox clearflow">
                      <div class="topLeft">
                      <img :src="item.avatar" alt="">
                  </div>
                  <div class="topRight">
                      <span>{{item.username}}</span>
                      <span>{{item.rateTime.years}}-0{{item.rateTime.months}}-{{item.rateTime.days}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.rateTime.hours}}:{{item.rateTime.mins}}</span>

                  </div>
                  <div class="contentbox">
                      <div class="contentImg">
                          <img v-for="(img) in item.score" :key="img" src="../assets/img/star36_on@2x.png" alt="">
                          <img  v-for="(star) in (5 - item.score)" :key="star" src="../assets/img/star36_off@2x.png" alt="">
                           
                      </div>
                         <div class="contentTime">
                        <span>{{item.deliveryTime}}分钟送达</span>
                         </div>
                 </div>
                  </div>
                  <div class="Cbox clearflow">
                      <span class="pinglun">{{item.text}}</span>
                      <div class="Cbox1">
                          <span :class='item.rateType==0?"dianzan zan iconfont icon-dianzan_kuai":"dianzan cai iconfont icon-cai"'></span>
                          <div v-for="(val) in item.recommend" :key="val" class="Cbox1-1">
                              {{val}}
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
   </div>
</template>

<script>
export default {
    data(){
        return{
        datas:[],
        ratings:[],
        haopinAll:[],
        chapinAll:[],
        ratingsAll:0,
        chapin:0,
        haopin:0
        }
    },
    methods:{
    pinlunAll(){
        this.ratings=this.datas.ratings; 
        
    },
    pinlunhao(){
    this.ratings=this.haopinAll
    },
    pinluncha(){
    this.ratings=this.chapinAll
    }
    },
    created:async function(){
    let {data} = await this.$http.get("api/getdata")
    data.ratings.forEach(time => {
        if(time.rateType==0){
            this.haopinAll.push(time)
        }
        this.haopin=this.haopinAll.length
        if(time.rateType==1){
            this.chapinAll.push(time)
        }
        this.chapin=this.chapinAll.length
        this.chapin+=time.rateType
        let date = new Date(time.rateTime)
        let  year=date.getFullYear()
        let   month=date.getMonth()+1
        let   day=date.getDate()
        let   hour=date.getHours()
        let   min=date.getMinutes()
        let times={
            years:year,
            months:month,
            days:day,
            hours:hour,
            mins:min
        }
        time.rateTime=times
    });
    this.ratings=data.ratings
    this.datas=data
    this.ratingsAll=this.ratings.length;
  }
}
</script>

<style lang="stylus" scoped>
w=100%; s1=24px; s2=28px; s3=32px; c=rgb(255,255,255);dw = 50%; bgc=#f3f5f7;
.evaluate{
  width: w;
  height: 200px
    min-height: 200px;
    max-height: 200px;
    padding: 36px;
    background-color #fff
    border-top: 1px solid rgba(7,17,27,.1);
    border-bottom: 1px solid rgba(7,17,27,.1);
}
.dianzan{
    float left
    font-size: s1;
    
}
.zan{
color: rgb(0,160,220)
}
.cai{
  color: rgb(183,187,191,160,220)  
}
.evaluate>div:nth-of-type(1){
    font-size: s2;
    font-weight: 700;
    color: rgb(7,17,18)
    line-height: s2;
    margin-bottom: s1;
}
.top{
    overflow:hidden;
    padding: 36px 0px;
    border-bottom:  1px solid rgba(7,17,27,.1);
}
.all{

}
.all1,.all2,.all3{
    width 120px;
    height: 64px
    font-size: 24px;
    text-align: center
    line-height: 64px
    border-radius: 2px;
    margin-right: 16px;
    float left
    a{
        font-size: 16px !important;

    }
}
.all1{
    background-color :rgb(0,160,220)
    color: c;
}
.all2{
    background-color :rgb(0,160,220,.2)
    color: rgb(77,85,93)
}
.all3{
    background-color : rgba(77,85,93,0.2)
    color: rgb(77,85,93)
}
.onlyshow{
    width: w;
    height: 100px
    min-height: 100px;
    max-height: 100px;
    padding: 0px 36px;
    background-color #fff
    border-top: 1px solid rgba(7,17,27,.1);
    border-bottom: 1px solid rgba(7,17,27,.1);
    font-size: s1;
    font-weight: 700;
    color: rgb(147,153,159)
    line-height: 100px;
}
.tease{
    width :w;
    padding: 0px 36px
    background-color #fff
   
}
.teaseStart{
    padding:32px  0px 
    width :w;
     border-bottom: 1px solid rgba(7,17,27,.1);

}
.top{
    min-height: 200px
}
.topLeft{
    width 56px
    height 56px
   
    img{
        width :w;
        height :w;
         border-radius: 50%;
    }
    margin-right: 24px
    float left
}
.topRight{
    float left
    width 85%
    line-height: s1;
    span:nth-of-type(1){
        font-size: 20px;
        color: rgb(7,17,27);
        float:left;
    }
    span:nth-of-type(2){
        font-size: 20px
         color: rgb(147,153,159)
         float:right
    }
    
}
.contentbox{
        float left
        margin-top:8px;
        margin-bottom: 12px;
}
.contentImg{
    line-height: 24px
    float: left;
    margin-top: 4px;
    img{
        width: 20px
        height: 20px
        margin-right: 12px
    }
  
}
  .contentTime{
        float:left;
        font-size: 20px
        font-weight: 200
        color: rgb(147,153,159)
         line-height: 24px
    }
    .Cbox{
        padding-left: 70px
        font-size: s1;
        color:rgb(7,17,27);
        line-height: 36px
        .pinglun{
                display: inline-block;
                margin-bottom: 16px;
        }
    }
    .Cbox1-1{
        border:  1px solid rgba(7,17,27,.1)
        border-radius: 2px
        background-color :c;
        float left
        margin-right: 16px
        white-space: nowrap;
        overflow hidden;
        text-overflow:ellipsis;
        width 125px
        
    }
</style>